<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <link rel="stylesheet" href="../../static/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../static/css/common.css"/>
</head>
<body style="padding: 20px;">
<div id="app">
    <div class="search-div">
        <div class="layui-row" style="width: 100%;">
            <div class="layui-col-sm8">
                <div class="search-inline">
                    <input type="text" class="layui-input search-input" v-model="state.blurry" placeholder="请输入角色名称/代码/描述">
                    <button type="button" class="layui-btn layui-btn-sm" @click="getRoleList">查询</button>
                </div>
            </div>
            <div class="layui-col-sm4">
                <div style="text-align: right;">
                    <button v-if="hasPer('role:edit')" type="button" class="layui-btn layui-btn-sm layui-btn-normal" @click="editRole">新增</button>
                </div>
            </div>
        </div>
    </div>
    <table id="role" lay-filter="role"></table>
</div>
</body>
<script src="../../static/layui/layui.js"></script>
<script src="../../static/js/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script src="../../static/js/http.js"></script>
<script src="../../static/js/vue3.js"></script>
<script src="../../static/js/common.js"></script>
<script>
  const app = {
    setup(){
      const state = Vue.reactive({
        blurry: ''
      })

      Vue.onMounted(() => {
        getRoleList()
      })

      const getRoleList = () => {
        get('/api/sys/role/table', {blurry: state.blurry}).then(res => {
          if (res.success){
            Vue.nextTick(() => {
              const table = layui.table
              renderTable(table, res.data)
            })
          }
        })
      }

      const renderTable = (table, data) => {
        table.render({
          elem: '#role',
          id: 'role_id',
          height: 'full-70',
          page: true,
          cols:[[
            { type: 'numbers', title: '序号', width: 60},
            { field: 'roleName', title: '角色名称'},
            { field: 'roleCode', title: '角色代码'},
            { field: 'description', title: '描述'},
            { field: 'option', title: '操作', width: 200, align: 'center', templet: function (data) {
              let authorizeHtml = ''
              let editHtml = ''
              let delHtml = ''
              if (hasPer('role:authorize')){
                authorizeHtml = '<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="authorize">授权</a>'
              }
              if (hasPer('role:edit')){
                editHtml = '<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>'
              }
              if (hasPer('role:del')){
                delHtml = '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>'
              }
                return authorizeHtml + editHtml + delHtml

              } },
          ]],
          data: data ? data : []
        })

        table.on('tool(role)', function (obj) {
          if (obj.event === 'edit'){
            editRole(obj.data)
          } else if (obj.event === 'del'){
            delRole(obj.data.id)
          } else if (obj.event === 'authorize'){
            authorize(obj.data.id, obj.data.roleCode)
          }
        })
      }

      const editRole = (data) => {
        layer.open({
          type: 2,
          title: '编辑菜单',
          area: ['800px', '400px'],
          content: 'edit.html',
          success: function (layero, index) {
            const iframeWin = window[layero.find('iframe')[0]['name']]
            //  将data传到子页面
            iframeWin.getParentData(data)
          }
        })
      }

      const delRole = (id) => {
        layer.confirm('确认删除角色？', {
          btn: ['确认', '取消']
        }, function () {
          remove('/api/sys/role/del', {id: id}).then(res => {
            if (res.success){
              successMsg(res.data)
              getRoleList()
            } else {
              errorMsg(res.msg)
            }
          })
        }, function () {
          infoMsg('操作已取消')
        })
      }

      const authorize = (id, roleCode) => {
        if (roleCode === 'ROLE_ADMIN'){
          waringMsg('超级管理员拥有所有菜单权限，无需授权！')
          return false
        }
        layer.open({
          type: 2,
          title: '角色授权',
          area: ['800px', '400px'],
          content: 'authorize.html',
          success: function (layero, index) {
            const iframeWin = window[layero.find('iframe')[0]['name']]
            //  将data传到子页面
            iframeWin.getParentData(id)
          }
        })
      }

      return {
        state,
        getRoleList,
        editRole,
        delRole,
        hasPer
      }
    }
  }
  const vue = Vue.createApp(app).mount('#app')
  function getChild(){
    vue.getRoleList()
  }
</script>
</html>